import React,{Component} from 'react'
import {DetailBox,DetailTitle,DetailContent} from './style'
import {connect} from 'react-redux'
import {getDetailAction} from '../../store/actionCreator'
class Detail extends Component{
    constructor(){
        super();
    }
    componentDidMount(){
        this.props.getDetailData();
        console.log(this.props.detailObj);
    }
    render(){
        return(
            <React.Fragment>
                <DetailBox>
                    <DetailTitle>{this.props.detailObj.get('title')}</DetailTitle>
                    <DetailContent  dangerouslySetInnerHTML={{ __html: this.props.detailObj.get('content') }}>
                    </DetailContent>
                </DetailBox>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=>{
    return{
        detailObj:state.get('detail').get('detailObj')
    }
}

const mapDispatchToProps = (dispatch)=>{
    return{
        getDetailData(){
            let action = getDetailAction();
            dispatch(action);
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Detail);